<template>
  <div>
      <div>总数：{{sum}}</div>
      <div>翻倍：{{BigSum}}</div>
      <p>总人数：{{peronList.length}}</p>
      <button @click="incre">+</button>
      <button @click="dncre">-</button>
      <button @click="oncre">奇数加</button>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  methods: {
    incre () {
      // 用commit 直接访问也可以，省略actions,但是要是actions中有需要处理复杂数据，还是要去dispatch，去访问，
      this.$store.dispatch('jia', 2)
      // this.$store.commit('JIA', 2)
    },
    dncre () {
      this.$store.dispatch('jian', 1)
    },
    oncre () {}
  },
  computed: {
    // 借助mapState生成，更方便，从state中直接获取对象形式
    // ...mapState({ he: 'sum' })
    // 借助mapState生成，更方便，从state中直接获取数组形式
    ...mapState(['sum', 'peronList']), // 这个要求方法名和在state中定义名一致才可以
    ...mapGetters(['BigSum'])
    // ...mapActions({ incre: 'jia' }),
    // ...mapMutations({ incre: 'JIA' })
  }
}
</script>

<style>

</style>
